<template>
      <div id="cart" style="padding-bottom:4.5rem">
            <div v-for="(list,index) in cartList" :key="list.id">
                  <div style="text-align:center;">
                        <h1 class="shopPosition" :class="index>0?'positionOther':''">{{list.title}}<span style="font-size:12px" v-show="index==0">(当前位置)</span></h1>
                  </div>
                  <div v-for="item in list.children" :key="item.id" class="cartShopBox">
                        <div class="cartShopT"><span>{{item.shop}}</span></div>
                        <div style="display:flex">
                              <div v-for="img in item.imgsrc" :key="img.id" class="cartShopWrap">
                                    <img :src="img.imgs" alt="" class="cartPic">
                                    <h3>{{img.cprice}}</h3>
                              </div>
                              
                        </div>
                  </div>
            </div>    
                  
            <!-- 底部导航栏begin -->
            <footer class="navFooterBox">
            <router-link to="/index" class="navFooter footerFirst">首页</router-link>
            <router-link to="/index/list" class="navFooter footerSec">分类</router-link>
            <router-link to="/index/cart" class="thirdSelect">购物车</router-link>
            <router-link to="/index/order" class="navFooter footerForth">订单</router-link>
            <router-link to="/index/mine" class="navFooter footerFive">我的</router-link>
            </footer>
            <!-- 底部导航栏end --> 
      </div>
</template>
<script>
export default {
      data(){
            return {
                  cartList:''
            }
      },
      methods:{
            // 获取购物车中的商品请求
            getCartList(){
                  this.jq.get(this.apiurl+'/cart/details').done(result=>{
                        if(result.error==0){
                              this.cartList=result.data
                        }
                  })
            },
      },
      created(){
            // 调用购物车商品请求方法
            this.getCartList()
      }
}
</script>
<style scoped>
      /* 购物车展示部分 begin */
      .shopPosition{
            display: inline-block;
            line-height: 1.8rem;
            margin: 15px 0 10px 0;
            padding: 0 14px 0 31px;
            border-radius: 22px;
            font-size: 14px;
            color: #fff;
            background: #47b34f url('/static/img/loc2.png') 13px center no-repeat;
            background-size: 10px 12px;
            border: 6px solid #d1e7d3;
      }
      .cartShopBox{
            margin: 0 0.5rem 7px 0.5rem;
            background:url('/static/img/gc.png') no-repeat 0 0;
            background-size:100% 154px;
            padding: 0 1.4rem;
      }
      .cartShopT{
            line-height: 44px;
            font-size: 15px;
            background: url('/static/img/m.png') no-repeat right center;
            background-size: 7px 11px;
      }
      .cartShopWrap{
            margin:0.5rem 0.7rem 0.5rem 0;
            text-align: center;
            height: 7rem;
      }
      .cartPic{
            width: 4.5rem;
      }
      .positionOther{
            border: 6px solid #e2e2e2;
            background: #999 url('/static/img/loc2.png') 13px center no-repeat;
            background-size: 10px 12px;
      }
      /* 购物车展示部分 end */
     
      /*底部固定导航begin*/ 
      .navFooterBox{
            position: fixed;
            z-index: 801;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: #fff;
            border-top: 1px solid #d9d9d9;
            box-sizing: border-box;
            display: flex;
      }

      .navFooter{
            display:inline-block;
            width:20%;
            text-align: center;
            font-size: 12px;
            box-sizing: border-box;
            color:#555;
            padding-top: 2.4rem;
      }
      .footerFirst{
            background:url('/static/img/footer.png') no-repeat center -250px;
            background-size:2rem auto;
      }

      .footerSec{
            background: url('/static/img/footer.png') no-repeat center -300px;
            background-size:2rem auto;
      }
      .footerThird{
            background: url('/static/img/footer.png') no-repeat center -350px;
            background-size:2rem auto;
      }
      .footerForth{
            background: url('/static/img/footer.png') no-repeat center -400px;
            background-size:2rem auto;
      }
      .footerFive{
            background: url('/static/img/footer.png') no-repeat center -450px;
            background-size:2rem auto;
      }
      .thirdSelect{
            display:inline-block;
            width:20%;
            text-align: center;
            font-size: 12px;
            box-sizing: border-box;
            padding-top: 2.4rem;
            background: url('/static/img/footer.png') no-repeat center -100px;
            background-size:2rem auto;
            color: #39ac69;
      }
/*底部固定导航end*/ 
      
</style>


